.table-page {
  width: 100%;
  padding: var(--ycy-gap-base);
  display: flex;
  position: relative;

  .menu {
    margin: 0 var(--ycy-gap-base);
    margin-bottom: var(--ycy-gap-base);
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-fill-color-blank);

    &.el-segmented {
      :deep(.el-segmented__item) {
        user-select: none;
        font-size: var(--el-font-size-base);
        padding: 4px 8px;
        margin-right: 8px;

        &:last-child {
          margin-right: 0;
        }
      }

      :deep(.el-segmented__item-label) {
        overflow: unset;
      }

      // :deep(.el-segmented__item-selected) {
      //   box-shadow: var(--ycy-box-shadow-primary);
      // }
    }
  }

  .search {
    display: flex;
    margin: 0 var(--ycy-gap-base);
    padding: var(--ycy-gap-base);
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-fill-color-blank);

    .el-button {
      margin-left: var(--ycy-gap-small);
    }
  }

  .list {
    flex: 1; // 父容器FoldCard的默认插槽中设置了display: flex
    display: flex;
    flex-direction: column;
    overflow: auto;
    margin-top: var(--ycy-gap-base);

    &-main {
      flex: 1;
      overflow: auto;
      margin-bottom: var(--ycy-gap-base);

      &-item {
        cursor: pointer;
        margin: 0 var(--ycy-gap-base);
        padding: var(--ycy-gap-base);
        background-color: var(--el-fill-color-blank);
        border-radius: var(--el-border-radius-base);
        margin-bottom: var(--ycy-gap-base);
        transition: var(--ycy-transition-base);
        border: 1px solid var(--el-fill-color-blank);

        &:last-child {
          margin-bottom: 0;
        }

        &.active,
        &:hover {
          border: 1px solid var(--el-color-primary);
          box-shadow: var(--ycy-box-shadow-base);
        }
      }
    }

    &-pagination {
      margin: 0 var(--ycy-gap-base);
    }
  }

  .table-list {
    flex: 1;
    overflow: auto;
    display: flex;
    flex-direction: column;
    margin-left: var(--ycy-gap-base);
    padding: var(--ycy-gap-base);
    border-radius: var(--el-border-radius-base);
    background-color: var(--el-bg-color-page);
    transition: var(--ycy-transition-base);

    &-header {
      height: 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--ycy-gap-base);
      margin-bottom: var(--ycy-gap-base);
      border-radius: var(--el-border-radius-base);
      background-color: var(--el-fill-color-blank);
    }

    &-search {
      padding: var(--ycy-gap-base);
      padding-bottom: 0;
      margin-bottom: var(--ycy-gap-base);
      border-radius: var(--el-border-radius-base);
      background-color: var(--el-fill-color-blank);
      display: flex;
      flex-wrap: wrap;

      .el-form-item {
        margin-right: var(--ycy-gap-base);
        margin-bottom: var(--ycy-gap-base);

        :deep(.el-form-item__label) {
          font-weight: bold;
        }

        :deep(.el-form-item__content) {
          flex-wrap: unset;
        }

        &:last-child { 
          margin-left: auto;
          margin-right: 0;
        }
      }
    }

    &-table {
      flex: 1;
      overflow: auto;
      display: flex;
      flex-direction: column;
      min-height: 0; // 关键点，允许内部溢出

      .el-table {
        border-radius: var(--el-border-radius-base) var(--el-border-radius-base) 0 0;
      }

      &-pagination {
        border-radius: 0 0 var(--el-border-radius-base) var(--el-border-radius-base);
      }
    }
  }
}